<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="~{common/header :: commonHead}">
    <title></title>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 th:text="${title}"></h5>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <div style="width: 70%">
                        <div class="well">
                            <h3>推送</h3>
                            <div class="layui-card-body">
                                <div class="layui-btn-container">
                                    <button class="layui-btn layui-btn-fluid">短信</button><br>
                                    <button class="layui-btn layui-btn-fluid">微信模板消息</button><br>
                                    <button class="layui-btn layui-btn-fluid">微信小程序通知</button><br>
                                    <button class="layui-btn layui-btn-fluid">支付宝消息</button><br>
                                    <button class="layui-btn layui-btn-fluid">支付宝小程序通知</button><br>
                                    <button class="layui-btn layui-btn-fluid">App推送</button>
                                </div>
                            </div>
                        </div>
                        <div class="well consume_well">
                            <h3>送券</h3>
                            <div class="layui-card-body">
                                <div class="layui-btn-container">
                                    <button class="layui-btn layui-btn-fluid">优惠券</button><br>
                                    <button class="layui-btn layui-btn-fluid">停车券</button>
                                </div>
                            </div>
                        </div>
                        <div class="well integral_well">
                            <h3>送积分</h3>
                            <div class="layui-card-body">
                                <div class="layui-btn-container">
                                    <button class="layui-btn layui-btn-fluid">积分</button>
                                </div>
                            </div>
                        </div>
<!--                        <div style="margin-left: 20px">-->
<!--                            <div>-->
<!--                                <button class="btn btn-primary" type="button" onclick="submitAll();">保存</button>-->
<!--                                <button class="btn btn-primary" type="button" onclick="testLabelGroup();">预览</button>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">

    let type = [[${type}]];

    function checkNum(e) {
        var serialize = e.parent().parent().parent().serializeJson();
        $.ajax({
            url: ipDomain + '/quanquan-user/memberLabel/count',
            contentType: 'application/json; charset=utf-8',
            data: serialize,
            dataType: 'JSON',
            type: 'POST',
            success: function (res) {
                alert('包含人数：' + res.data);
            }
        });
    }

    function testLabelGroup() {
        let list = new Array();
        $('.label-form').each((i, e) => {

            var json2Object = $(e).serializeJson2Obj();
        if(jQuery.isArray(json2Object.option)){
            json2Object['option'] = json2Object.option[0]+"~"+json2Object.option[1];
        }

        list.push(json2Object);
    });
        $.ajax({
            url: ipDomain + '/quanquan-user/memberLabel/countAll',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(list),
            dataType: 'JSON',
            type: 'POST',
            success: function (res) {
                alert('包含人数：' + res.data);
            }
        });
    }

    function submitAll() {
        console.log(type)

        let groupData = $('#label-group-form').serializeJson2Obj();
        if (groupData['name'] == null || groupData['name'] == '') {
            layer.msg('规则名称不能为空', {time: 500});
            return;
        }
        let labels = new Array();
        $('.label-form').each((i, e) => {
            var json2Object = $(e).serializeJson2Obj();
        if(jQuery.isArray(json2Object.option)){
            json2Object['option'] = json2Object.option[0]+"~"+json2Object.option[1];
        }

        labels.push(json2Object);
    });
        if (labels == null || labels.length == 0) {
            layer.msg('子标签不能为空', {time: 500});
            return;
        }
        groupData['labels'] = labels;

        let url = ipDomain + (type == 'add' ? '/quanquan-user/labelGroup/create' : '/quanquan-user/labelGroup/update');
        $.ajax({
            url: url,
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(groupData),
            dataType: 'JSON',
            type: 'POST',
            success: function (res) {
                if (res.resCode == 0) {
                    window.location.href = '/userLabel/list';
                } else {
                    layer.msg(res.resMsg, {icon: 11, time: 10})
                }
            }
        });
    }

    if (type == 'edit') {
        initForm();
    }

    function initForm() {
        let params = getRequestParams(), id = params[1].value, formData;
        if (params.length != 0 && params.length > 1) {
            $.get(ipDomain + '/quanquan-user/labelGroup/get/' + id, (res) => {
                formData = res.data;
            console.log(formData);
            $("#label-group-form").loadData(formData);
            let formArr = formData.labels;
            formArr.forEach((e) => {
                let form = $('#label-form-' +e.labelFrom + '-' + e.fieldName);
            form.find("input[name='id']").val(e.id);
            let options = form.find("input[name='option']");
            options.each((i, o) => {
                if($(o).attr('type') == "radio"){
                if ($(o).val() == e.option) {
                    $(o).attr('checked', true);
                } else {
                    $(o).removeAttr('checked');
                }
            }else if($(o).attr('type') == "text"){
                $(o).val(e.option);
            }else if($(o).attr('type') == "number"){
                if(i == 0){
                    $(o).val(e.leftValue);
                }else{
                    $(o).val(e.rightValue);
                }
            }
        });
        });
        }
        );
        }
    }

    $("#consume-switch").click(function () {

        var checked = document.getElementById("consume-switch").checked;
        if(checked){
            $(".consume_well .row").show();
        }else{
            $(".consume_well .row input[name='option']").val("");
            $(".consume_well .row").hide();
        }

    });
    $("#integral-switch").click(function () {

        var checked = document.getElementById("integral-switch").checked;
        if(checked){
            $(".integral_well .row").show();
        }else{
            $(".integral_well .row input[name='option']").val("");
            $(".integral_well .row").hide();
        }

    });
    $("#park-switch").click(function () {

        var checked = document.getElementById("park-switch").checked;
        if(checked){
            $(".park_well .row").show();
        }else{
            $(".park_well .row input[name='option']").val("");
            $(".park_well .row").hide();
        }

    });

    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#integral_time'
            ,type: 'datetime'
            ,range: "~"
        });
        laydate.render({
            elem: '#park_time'
            ,type: 'datetime'
            ,range: "~"
        });
        laydate.render({
            elem: '#cosume_day'
            ,type: 'date'
            ,format:"yyyy-MM-dd HH:mm:ss"
            ,range: "~"
        });
    });
</script>
</html>